<template>
  <app-page title="消息通知" class="message_page" fill style="background-color: #f5f5f5">
    <!-- <app-tab v-model="level" :tabs="tabs" @change="pageActions.handleSearch" /> -->

    <!-- <app-list> -->
    <!-- pageData.list -->
    <div style="height: calc( 100% - 48px )">
      <el-table :data="pageData.list" v-loading="pageData.loading" height="100%" @row-click="clickcheck">
        <el-table-column label="重要程度" prop="level" width="230px">
          <template #default="{ row }">
            <div class="level">
              <div class="dot" :style="{ background: colors[row.level] }"></div>
              {{ levels[row.level] }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="内容" prop="message">
          <template #default="{ row }">
            <div style="display: flex">
              <div style="margin-right: 8px; cursor: pointer">
                <div v-if="row.check_status == 0 || row.check_status == '0'" class="nodu">未读</div>
                <div v-if="row.check_status == 1 || row.check_status == '1'" class="yidu">已读</div>
              </div>
              <div>{{ row.message }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发送时间" prop="created_at" width="200px" />
      </el-table>
    </div>

    <!-- <template #footerRight> -->
    <div class="message_pagination" style="height: 48px">
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        v-model:current-page="pageData.page"
        v-model:page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        background
      />
    </div>

    <!-- </template> -->
    <!-- </app-list> -->
  </app-page>
</template>
<script setup>
import { http } from '@/utils/http'

const levels = { 1: '普通', 2: '重要', 3: '告警', 4: '成功' }
const colors = { 1: '#47acff', 2: '#f83e3e', 3: '#f0ad0a', 4: '#34CD02' }

const level = ref(-1)

const tabs = [
  { label: '全部', value: -1 },
  { label: '普通消息', value: 1 },
  { label: '重要消息', value: 2 },
  { label: '告警消息', value: 3 },
  { label: '成功消息', value: 4 },
]

const { pageData, pageActions, dialog } = usePage(
  () => {
    const query = {
      page: pageData.page,
      page_size: pageData.pageSize,
      ...pageData.query,
    }

    if (level.value != -1) query.level = level.value

    return http
      .get('/message/list', {
        params: query,
      })
      .then(res => {
        pageData.list = res.data.list
        pageData.total = res.data.total
      })
  },
  {
    query: {},
  }
)

const clickcheck = row => {
  console.log(row.id)
  http.get(`/message/read?id=${row.id}`).then(res => {
    if (res.code == 200) {
      row.check_status = 1
      // pageActions.refresh(true)
    }
  })
}
</script>
<style lang="scss" scoped>
.level {
  display: flex;
  align-items: center;
}
.dot {
  width: 12px;
  height: 12px;
  margin-right: 12px;
  border-radius: 100%;
}

:deep(.app-list) {
  border-radius: 0 0 16px 16px;
}

.nodu {
  width: 32px;
  height: 20px;
  padding: 0 2px;
  border-radius: 4px;
  background-color: #47acff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.yidu {
  width: 32px;
  height: 20px;
  padding: 0 2px;
  border-radius: 4px;
  background-color: #b7bdc6;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.message_pagination{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>


<style>
.message_page .main {
  padding: 16px;
  background: #fff;
}
</style>